<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" type="text/css" href="__STATIC__/plugins/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/plugins/jquery-ui/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/add_voucher.css">
    <script type="text/javascript" src="__STATIC__/plugins/jquery-ui/external/jquery/jquery.js"></script>
    <script type="text/javascript" src="__STATIC__/plugins/layui/layui.js"></script>
    <script type="text/javascript" src="__STATIC__/plugins/jquery-ui/jquery-ui.js"></script>
    <style>
        .layui-main input {
            border: 0;
            background: white!important;
        }
    </style>
</head>

<body>
<div class="layui-header">
    <span style="font-size: 18px; font-weight: bold;">记账凭证</span>
</div>
<form class="layui-form" id="voucher">
    <div class="layui-main" style="width: 1000px;">
        <div class="head">
            <div class="layui-form-item layui-inline">
                <label for="voucher_id">凭证号：</label>
            </div>
            <div class="layui-form-item layui-inline" style="width: auto; left: -10px">
                <input class="layui-input" id="voucher_id" type="text" name="voucher_id" value="{$vouchers.voucher_id}" readonly style="padding-left: 0">
            </div>
            <div class="layui-form-item layui-inline">
                <label for="account">日期：</label>
            </div>
            <div class="layui-form-item layui-inline " style="width: auto; left: -25px">
                <input class="layui-input" id="account" type="text" name="add_time" value="{$vouchers.voucher_time}" readonly style="padding-left: 0">
            </div>
        </div>
        <div class="table_voucher">
            <table class="layui-table" style="width: 960px;">
                <thead>
                <tr>
                    <th style="width: 180px; font-weight: bold;">摘&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;要</th>
                    <th style="width: 340px; font-weight: bold;">会计科目</th>
                    <th style="width: 219px">
                        <div class="th_title">
                            <span>借方金额</span>
                        </div>
                        <div class="th_money">
                            <span>亿</span>
                            <span>千</span>
                            <span>百</span>
                            <span>十</span>
                            <span>万</span>
                            <span>千</span>
                            <span>百</span>
                            <span>十</span>
                            <span>元</span>
                            <span>角</span>
                            <span class="last">分</span>
                        </div>
                    </th>
                    <th style="width: 219px">
                        <div class="th_title">
                            <span>贷方金额</span>
                        </div>
                        <div class="th_money">
                            <span>亿</span>
                            <span>千</span>
                            <span>百</span>
                            <span>十</span>
                            <span>万</span>
                            <span>千</span>
                            <span>百</span>
                            <span>十</span>
                            <span>元</span>
                            <span>角</span>
                            <span class="last">分</span>
                        </div>
                    </th>
                </tr>
                </thead>
                <tbody id="tbody">
                {volist name="voucher" id="vo"}
                <tr>
                    <td class="digestInput">
                        <div>{$vo.digest?$vo.digest:''}</div>
                        <input type="hidden" value="{$vo.digest?$vo.digest:''}" name="digest_{$vo.row_index}">
                    </td>
                    <td class="subjectInput">
                        <div>{$vo.subject?$vo.subject:''}</div>
                        <input type="hidden" value="{$vo.subject?$vo.subject:''}" name="subject_{$vo.row_index}">
                    </td>
                    <td class="td_debtor">
                        <div>
                            <span>{$vo.debit?$vo.debit:''}</span>
                        </div>
                        <input type="hidden" value="{$vo.debit?$vo.debit:''}" name="debit_{$vo.row_index}">
                    </td>
                    <td class="td_creditor">
                        <div>
                            <span>{$vo.credit?$vo.credit:''}</span>
                        </div>
                        <input type="hidden" value="{$vo.credit?$vo.credit:''}" name="credit_{$vo.row_index}">
                    </td>
                </tr>
                {/volist}
                </tbody>
                <tfoot>
                <tr>
                    <td id="count" colspan="2">合&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;计：
                        <span>{$vouchers.footing_upper}</span>
                        <input type="hidden" name="footing_upper" value="{$vouchers.footing_upper}"/>
                    </td>
                    <td id="tfoot_debtor">
                        <div>
                            <span>{$vouchers.footing_lower}</span>
                            <input type="hidden" name="footing_lower" value="{$vouchers.footing_lower}"/>
                        </div>
                    </td>
                    <td id="tfoot_creditor">
                        <div>
                            <span>{$vouchers.footing_creditor}</span>
                            <input type="hidden" name="footing_creditor" value="{$vouchers.footing_creditor}"/>
                        </div>
                    </td>
                </tr>
                </tfoot>
            </table>
            <footer>
                <span>制单人：</span>
                <span id="span_prepard">{$vouchers.prepard_by}</span>
                <input type="hidden" id="input_prepard" name="prepard_by" value="{$vouchers.prepard_by}"/>
            </footer>
            <div id="showContent"></div>
        </div>
    </div>
</form>

<script type="text/javascript">
    //显示单元格隐藏内容
    function showContent() {
        $('.digestInput, .subjectInput').mouseover(function () {
            var div = this.getElementsByTagName('div')[0];
            var len = div.offsetWidth;
            var len_s = div.scrollWidth;
            // console.log('len:' + len + '--' + len_s);
            var top = $(this).position().top;
            var left = $(this).position().left;
            var text = $(this).text();
            $('#showContent').css({
                'top': top + 20,
                'left': left + 10
            });
            if (len_s > len) {
                $('#showContent').css({
                    'display': 'block',
                    'border': 'solid 1px #e6e6e6',
                    'width': len_s,
                });
                $('#showContent').text(text);
                $('#showContent').mouseover(function () {
                    $('#showContent').css('display', 'block');
                });
                $('#showContent').mouseout(function () {
                    $('#showContent').css('display', 'none');
                });
            }
        });
        $('.digestInput, .subjectInput').mouseout(function () {
            $('#showContent').css('display', 'none');
        });
    }

</script>
<script>
    $(function() {
        showContent();
    });
</script>

</body>

</html>